<template>
  <NavBar />
    <div class="seller-dashboard">
      <!-- 店铺名称 -->
      <div class="shop-name">
        <h1><i>Welcome to your store!</i></h1>
      </div>
  
      <!-- 按钮切换区域 -->
      <div class="category-tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['category-item', { active: activeTab === tab.component }]"
          @click="activeTab = tab.component"
        >
          {{ tab.label }}
        </div>
      </div>
  
      <!-- 内容区域 -->
      <div class="content">
        <component :is="activeTab" />
      </div>
    </div>  
  </template>
  
  <script>
  import { ref } from 'vue';
  import ManageProducts from './ManageProducts.vue';
  import ManageOrders from './ManageOrders.vue';
  import ReplyBuyers from './ReplyBuyers.vue';
  import NavBar from '../components/NavBar.vue';
  import store from '../store';
  import router from '../router';
  export default {
    name: 'SellerDashboard',
    components: {
      ManageProducts,
      ManageOrders,
      ReplyBuyers,
      NavBar,
    },
    setup() {
      const sellername = store.getters['seller/sellername'];
      if(!sellername){
        alert("please login");
        router.push("/sellerLogin");
        return ;
      }
      const activeTab = ref('ManageProducts'); // 默认显示 ManageProducts 组件
  
      // 按钮配置
      const tabs = ref([
        { label: 'Manage Products', component: 'ManageProducts' },
        { label: 'Manage Orders', component: 'ManageOrders' },
        { label: 'Reply to Buyers', component: 'ReplyBuyers' },
      ]);
  
      return {
        activeTab,
        tabs,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 全局样式 */
  body,
  .seller-dashboard {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    overflow: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .seller-dashboard {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }
  
  /* 店铺名称 */
  .shop-name {
    text-align: center;
    padding: 20px;
    background-color: #4caf50; /* 绿色背景 */
    color: white; /* 白色文字 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .shop-name h1 {
    font-size: 2em;
    font-weight: bold;
    font-style: italic;
    margin: 0;
  }
  
  /* 按钮切换区域 */
  .category-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 0;
    background-color: #fff;
    border-bottom: 2px solid #eee;
  }
  
  .category-item {
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1em;
    background-color: #f8f8f8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    color: #333;
  }
  
  .category-item:hover {
    background-color: #4caf50; /* 绿色背景 */
    color: white; /* 白色文字 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .category-item.active {
    background-color: #4caf50; /* 绿色背景 */
    color: white; /* 白色文字 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* 内容区域 */
  .content {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    overflow-y: auto;
  }
  </style>